<template>
	<view class="wrap-partner-income flex column">
		<view class="income-info flex align-center just-between">
			<view class="total income-item flex column just-center">
				<view class="f-36 fBold">{{ totalIncome }}</view>

				<view class="f-26">总收益</view>
			</view>

			<view class="today income-item flex column just-center">
				<view class="f-36 fBold">{{ todayIncome }}</view>

				<view class="f-26">今日总收益</view>
			</view>
		</view>

		<view class="wrap-screen flex align-center just-between">
			<picker mode="selector" :range="screenList" range-key="title" @change="onScreenChange">
				<view class="screen-info flex align-center">
					<view class="title f-28">{{ screen_title }}</view>

					<image class="arrow" :src="$staticImagePath('partner/arrow.png')" />
				</view>
			</picker>

			<view class="current f-30" v-if="time !== '0'">合计：{{ currentIncome }}</view>
		</view>

		<view class="wrap-list safe-area">
			<block v-for="(item, index) in list" :key="index">
				<view class="item">
					<view class="num-status flex align-center just-between">
						<view class="num f-28">订单编号:{{ item.order_sn }}</view>

						<view class="status f-26">{{ item.type }}</view>
					</view>

					<view class="user-info flex align-center">
						<image class="avatar" :src="$getImageURL(item.user.avatar)" />

						<view class="info flex column">
							<view class="name f-28">{{ item.user.nickname }}</view>

							<view class="price f-26">
								<text>收益:¥{{ item.money }}</text>
								<text>(含</text>
								<text>服务费:{{ item.service_price }}</text>
								<text>和</text>
								<text>手续费:{{ item.procedure_price }}</text>
								<text>)</text>
							</view>
						</view>
					</view>

					<view class="time f-28 flex align-center">{{ item.createtime_text }}</view>
				</view>
			</block>

			<wanl-empty v-if="list.length === 0" text="暂无收益" />
		</view>
	</view>
</template>

<script>
	import { GetBelowProfit } from "@/API/partner.js";
	export default {
		data() {
			return {
				isFirst: true,
				page: 1,
				total: 0,
				list: [],

				todayIncome: "0.00",
				totalIncome: "0.00",
				currentIncome: "0.00",
				time: "0",

				screenList: [
					{ title: "今日", id: "0" },
					{ title: "本月", id: "1" },
					{ title: "本年", id: "2" },
				],
				screen_title: "今日",
			};
		},
		methods: {
			/**
			 * 加载
			 */
			onInitData() {
				if (this.isFirst === false) {
					return;
				}
				this.isFirst = false;
				this.onRefresh();
			},
			/**
			 * 筛选
			 */
			onScreenChange(e) {
				const index = e.detail.value;
				const item = this.screenList[index];

				this.screen_title = item.title;
				this.time = item.id;

				this.onRefresh();
			},

			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 加载更多
			 */
			onLoadMore() {
				if (this.list.length < this.total) {
					this.page++;
					this.getData();
				}
			},
			/**
			 * 网络请求
			 */
			getData() {
				GetBelowProfit(this.page, this.time).then((res) => {
					this.totalIncome = res.data.total;
					this.todayIncome = res.data.today;
					this.currentIncome = res.data.live;
					const list = res.data.data.data;
					this.total = res.data.data.total;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-partner-income {
		width: 100%;
		overflow: hidden;
		padding: 0rpx 25rpx;
		box-sizing: border-box;
		gap: 20rpx;

		.income-info {
			width: 100%;
			overflow: hidden;
			height: 140rpx;

			.income-item {
				width: 340rpx;
				height: 140rpx;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 0 30rpx;
				box-sizing: border-box;
				gap: 15rpx;
			}

			.total {
				background: linear-gradient(to right, #dd0a2c, #f3a26a);
				color: white;
			}

			.today {
				background: linear-gradient(to right, #f7c388, #fce0ba);
				color: #865b2a;
			}
		}

		.wrap-screen {
			width: 100%;
			overflow: hidden;

			.screen-info {
				height: 62rpx;
				background-color: white;
				border-radius: 10rpx;
				overflow: hidden;
				padding: 0rpx 25rpx;
				box-sizing: border-box;
				max-width: 100%;
				width: fit-content;
				gap: 30rpx;

				.title {
					color: #121212;
				}

				.arrow {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.current {
				color: #121212;
			}
		}

		.wrap-list {
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;

			.item {
				width: 100%;
				background-color: white;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}

				.num-status {
					width: 100%;
					height: 80rpx;
					overflow: hidden;
					border-bottom: 2rpx solid #eeeeee;
					padding: 0 20rpx;
					box-sizing: border-box;
					gap: 10rpx;

					.num {
						color: #333;
					}

					.status {
						font-weight: 400;
						color: #dd0a2c;
					}
				}

				.user-info {
					width: 100%;
					overflow: hidden;
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eeeeee;
					gap: 20rpx;

					.avatar {
						width: 60rpx;
						height: 60rpx;
					}

					.info {
						flex: 1;
						overflow: hidden;
						gap: 10rpx;

						.name {
							color: #333;
						}

						.price {
							color: #dd0a2c;
						}
					}
				}

				.time {
					width: 100%;
					height: 60rpx;
					overflow: hidden;
					padding: 0 20rpx;
					box-sizing: border-box;
					color: #999;
				}
			}
		}
	}
</style>
